<template>
    <div class="aaaa">
        <div class="CateThreeView" v-for="(item) in auto.children" :key="item.id">
            <div class="divTop">
                <p class="p">
                    <span class="toop">- {{ item.name }} -</span>
                    <!-- <span class="line"></span> -->
                </p>
                <div class="topp">温暖柔软，品质之选</div>
            </div>
            <ul class="divFoot1">
                <li v-for="it in item.goods" :key="it.id">
                    <img :src="it.picture" alt="">
                    <p>{{ it.name }}</p>
                    <p style="font-size:14px; color:gray;">{{ it.desc }}</p>
                    <p style="color:red; font-size:20px;">¥{{ it.price }}</p>
                </li>
            </ul>
        </div>
    </div>

</template>


<script>
import { getCategory } from '@/Api/cate'
export default {
    data() {
        return {
            auto: [],
            rid: null
        }
    },
    methods: {
        async getAuto(id) {
            let { data: res } = await getCategory(id)
            this.auto = res.result
            // this.$store.commit('setCate', res.result)
        }
    },
    mounted() {
        this.rid = this.$route.query.id
        this.getAuto(this.rid)
        // console.log(this.$router);
    },
    watch: {
        $route: {
            handler(val) {
                this.rid = val.query.id
                this.getAuto(this.rid)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.aaaa {
    width: 100%;
    margin: auto;
}

.CateThreeView {
    width: 100%;
    background: white;
    margin-bottom: 20px;

    .divTop {
        width: 100%;
        height: 100px;
        // background: yellow;
        display: flex;
        flex-direction: column;
        align-content: space-around;

        .p {
            width: 100%;
            height: 50px;
            position: relative;
            // background: orange;

            .toop {
                // width: 160px;
                height: 50px;
                line-height: 50px;
                font-size: 28px;
                color: gray;
                z-index: 8;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: white;
            }

            .line {
                display: inline-block;
                width: 200px;
                border: 1px solid gray;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .topp {
            width: 100%;
            height: 50px;
            color: gray;
            line-height: 50px;
            text-align: center;
        }
    }

    .divFoot1 {
        width: 90%;
        height: 260px;
        margin: auto;
        display: flex;
        justify-content: space-around;
        // background: orange;

        li:hover {
            margin-top: -3px;
            box-shadow: 0 0 5px gray;
            // border: 1px solid gray;
        }

        li {
            flex: 1;
            height: 240px;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            transition: all 1s;
            // background: white;
            overflow: hidden;
            // margin: 0 20px; 
            padding-top: 20px;
            padding-bottom: 20px;

            img {
                width: 60%;
            }

            p {
                width: 60%;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

            }


        }
    }
}
</style>